<template>
  <el-cascader @change="change" v-model="addressValue" :options="citys" :props="cityConfig" :show-all-levels="true"></el-cascader>
</template>

<script>
import citys from './citys.js'
export default {
  name: 'SelectAddress',
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      addressValue: '',
      citys: [],
      cityConfig: {
        value: 'name',
        label: 'name',
        children: 'list',
      },
      seachMap: {
        pid: 0
      }
    }
  },
  created () { },
  mounted () {
    this.initCityData()
  },
  watch: {
    value: {
      immediate: true,
      handler (str) {
        if (!!str) {
          this.addressValue = str
        }
      },
    },
  },
  methods: {
    initCityData () {
      this.citys = citys.map((p) => {
        if (!!p.list) {
          p.list = p.list.map((c) => {
            c.list = null
            return c
          })
        }
        return p
      })
    },
    change () {
      this.$emit('change', this.addressValue)
    },
  },
}
</script>

<style scoped lang="less"></style>
